
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<html>
<head>
<%@ include file="../../layout/menubar.jsp"%>
<%@ include file="../../layout/left-menu.jsp"%>
<%@ include file="../../layout/header.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hệ thống quản lí thuốc online</title>
</head>
<body>
	<div id="wrapper">
		<div id="page-wrapper">
			<div class="page-content">
				<!-- begin PAGE TITLE ROW -->
				<div class="row">
					<div class="col-lg-12">
						<div class="page-title">
							<ol class="breadcrumb">
								<li><i class="fa fa-dashboard"></i> <a href="">Quản lí
										tài khoản</a></li>
							</ol>
						</div>
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
				<!-- end PAGE TITLE ROW -->

				<!-- begin ADVANCED TABLES ROW -->
				<div class="row">
					<div class="col-lg-12">
						<div class="portlet portlet-default">
							<div class="portlet-heading">
								<div class="portlet-title">
									<h4>Danh sách tài khoản</h4>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="portlet-body">
								<div class="table-responsive">
									<div class="row form-group">
										<div class="col-sm-6 col-xs-12">
											<form action="list" id="searchRoleForm">
												<input type="hidden" value="${role}" id="txtRole"/>
												<label>Quyền :</label> <select value="${role}" style="width:200px; display: inline; margin-left: 75px;"
													class="form-control" id="drRole"
													onchange="javascript:search();" name="roleName">
													<option value="4">Admin</option>
													<option value="3">Chủ cửa hàng</option>
													<option value="1">Nhân viên bán hàng</option>
													<option value="5">Nhân viên cung cấp dịch vụ</option>
												</select>
											</form>
										</div>
										
										<div class="col-sm-6 col-xs-12">
											<form action="list">
												<input type="hidden" value="listAllData" name="listAll" />
												<button type="submit" class="btn btn-default pull-right btn-square">
													<span class="glyphicon glyphicon-plus"></span>&nbsp;Hiển thị tất cả
												</button>
											</form>
										</div>
										<div class="col-sm-6 hidden-xs"></div>
									</div>
									<div class="row form-group">
										<div class="col-sm-6 col-xs-12">
											<form action="list">
												<label>Tìm kiếm theo tên: </label> <input type="text" style="width:200px; display: inline;"
													class="form-control" placeholder="Tên tài khoản" name="searchKey" id="searchKey" value="${searchKey}">
											<button type="submit" class="btn btn-square btn-primary" style="width:100px; margin-left: 20px;">Tìm</button>
											</form>
										</div>
									</div>
									<table id="example-table"
										class="table table-striped table-bordered table-hover table-green">
										<thead>
											<tr>
												<th>STT</th>
												<th>Họ tên</th>
												<th>Tài khoản</th>
												<th>Quyền</th>
												<th>E-mail</th>
											</tr>
										</thead>
										<tbody id='tableBody'>
											<%int i = 0; %>
											<c:forEach var="acc" items="${users}">
												<%i++;%>
												<tr>
													<td><%=i %></td>
													<td><a href="" data-toggle="modal"
														data-target="#modalUpdate"
														onclick="editButtonTouched(${acc.getId()},'${acc.getFullname()}','${acc.getAccount()}','${acc.getPassword()}','${acc.getEmail()}')">${acc.getFullname()}</a></td>
													<td>${acc.getAccount()}</td>
													<td>${acc.getRole().getName()}</td>
													<td>${acc.getEmail()}</td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
								<!-- /.table-responsive -->
							</div>
							<!-- /.portlet-body -->
							<div class="portlet-footer">
								<button type="submit"
									class="btn btn-default pull-right btn-square"
									data-toggle="modal" data-target="#modalCreate">
									<span class="glyphicon glyphicon-plus"></span>&nbsp;Thêm mới
								</button>
								<div class="clearfix"></div>
							</div>
							<!-- /.portlet-footer -->
						</div>
						<!-- /.portlet -->

					</div>
					<!-- /.col-lg-12 -->

				</div>
				<!-- /.row -->

			</div>
			<!-- /.page-content -->

		</div>
		<!-- /#page-wrapper -->
		<!-- end MAIN PAGE CONTENT -->
	</div>
	<!-- Modal add user -->
	<%@ include file="create.jsp"%>
	<%@ include file="edit.jsp"%>
</body>
<script type="text/javascript">
	setRole();
	function editButtonTouched(id,fullname, name, password, email) {
	    document.getElementById("userIdeee").value = id;
	    document.getElementById("updateFullname").value = fullname;
	    document.getElementById("usernameeee").value = name;
	    document.getElementById("emaileee").value = email;
	    document.getElementById("deleteuser").value = id;
	};
	
	function deleteUser() {
	    var id = document.getElementById("deleteuser").value;
	    var html = "";
	    $.ajax({
	        cache: false,
	        type: "GET",
	        url: "delete",
	        data: {
	            "userId": id
	        },
	        success: function (data) {
	            location.reload();
	        },
	        error: function (data) {
	            alert("error");
	        }
	    });
	};
	function search(){
			document.getElementById("searchRoleForm").submit();
	};
	function setRole(){
	  	var sel = document.getElementById('drRole');
	    var val = document.getElementById('txtRole').value;
	    for(var i = 0, j = sel.options.length; i < j; ++i) {
	        if(sel.options[i].value == val) {
	           sel.selectedIndex = i;
	           break;
	        };
	    };
	}
</script>
</html>
